<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .cut {
            width: 707px;
            height: 500px;
            border: 1px solid #ccc;
            margin: 0 auto;
            position: relative;
        }

        .cut img {
            width: 100%;
        }

        .cut .mask {
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(29, 125, 104, 0.3);
            top: 0;
            left: 0;
        }

        .cut .cut-area {
            width: 200px;
            height: 200px;
            position: absolute;
            top: 0;
            left: 0;
            background: url(./imgs/a.webp);
            background-size: 707px 500px;
        }

        .cut .cut-area .dot {
            position: absolute;
            right: -5px;
            bottom: -5px;
            width: 10px;
            height: 10px;
            background: red;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="cut" class="cut">
        <img src="./imgs/3.jfif" alt="">
        <div class="mask"></div>
        <div id="cutArea" class="cut-area">
            <div id="dot" class="dot"></div>
        </div>
    </div>
    <div>boxxxx</div>
    <script>
        
        //获取元素
        var cutArea = document.getElementById("cutArea")
        var cut = document.getElementById("cut")
        var dot = document.getElementById("dot")
        cutArea.onmousedown = function(e){
            //获取现在鼠标位置
            var nowX = e.pageX
            var nowY = e.pageY

            //获取要改变的参数 点击的时候参数
            var left = cutArea.offsetLeft
            var top = cutArea.offsetTop
            document.onmousemove = function(a){
                var movedX = a.pageX
                var movedY = a.pageY
                //得到一个 最终值 用变量接受
                var resX = movedX - nowX + left
                var resY = movedY - nowY + top
                //判断边界
                if( resX < 0){
                    resX = 0
                }
                if(resX > cut.clientWidth - cutArea.clientWidth){
                    resX = cut.clientWidth - cutArea.clientWidth
                }
                if( resY < 0){
                    resY = 0
                }
                if(resY > cut.clientHeight - cutArea.clientHeight){
                    resY = cut.clientHeight - cutArea.clientHeight
                }
                //方块移动
                cutArea.style.left = resX + "px"
                cutArea.style.top = resY + "px"

                //背景图片跟随移动
                cutArea.style.backgroundPositionX = -resX + "px"
                cutArea.style.backgroundPositionY = -resY + "px"
            }
        }
        //点 事件
        dot.onmousedown = function(e){
            e.stopPropagation()
            //获取现在鼠标位置
            var nowX = e.pageX
            var nowY = e.pageY
            var width = cutArea.clientWidth
            var height = cutArea.clientHeight
            var left = cutArea.offsetLeft
            var top = cutArea.offsetTop

            document.onmousemove = function(a){
                var movedX = a.pageX
                var movedY = a.pageY
                //得到一个 最终值 用变量接受
                var resWidth = movedX - nowX + width
                var resHeight = movedY - nowY + height
                
                if(resWidth > cut.clientWidth - left){
                    resWidth = cut.clientWidth  - left
                }
                if(resHeight > cut.clientHeight - top){
                    resHeight = cut.clientHeight - top
                }
                
                
                cutArea.style.width = resWidth + "px"
                cutArea.style.height = resHeight + "px"
            }

        }
        document.onmouseup = function(){
            document.onmousemove = null
        }
        document.onselectstart = function(e){
            // return false
            e.preventDefault()
        }
        // document.oncontextmenu = function(e){
        //     e.preventDefault()
        // }
        function gn(dom){
            dot.clientLeft
        }
    
    </script>
</body>
</html>